<template>
    <view class="login-page login-page2">
        <form @submit="formSubmit">
            <view class="login-container">
                <view class="login-text">欢迎注册～</view>
                <view class="login-form">
                    <view class="login-form__lable">用户名</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.username" class="login-input" type="text" name="username" maxlength="30" placeholder="请输入您的用户名" />
                        <image @click="formData.username = ''" v-if="formData.username" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view>
                <view class="login-form">
                    <view class="login-form__lable">密码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.password" class="login-input" type="password" name="password" placeholder="最少六位，字母＋数字" />
                        <image @click="formData.password = ''" v-if="formData.password" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view>
                <view class="login-form">
                    <view class="login-form__lable">手机号码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.mobile" class="login-input" type="text" name="mobile" maxlength="11" placeholder="请输入您的手机号码" />
                        <image @click="formData.mobile = ''" v-if="formData.mobile" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view>
                <view class="login-form login-code">
                    <view class="login-form__lable">验证码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.mobile_code" class="login-input" name="mobile_code" placeholder="请输入验证码" />
                        <image @click="formData.mobile_code = ''" v-if="formData.mobile_code" src="/static/img/login/clear.png" class="clear-icon next-icon" :class="{ isSend: disabled }"></image>
                        <button class="btn-text" @click="startTime" :disabled="disabled">{{ disabled ? `重新发送（${time}）` : "获取验证码" }}</button>
                    </view>
                </view>
                <!-- <view class="login-form">
                    <view class="login-form__lable">邀请码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.invite_code" class="login-input" type="text" name="invite_code" placeholder="请输入您的邀请码" />
                        <image @click="formData.invite_code = ''" v-if="formData.invite_code" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view> -->
                <view class="login-footer">
                    <button class="btn-blue flex" form-type="submit" :loading="loading">{{ loading ? "注册中" : "注册" }}</button>
                </view>
                <view class="login-register flex-end">
                    <navigator class="text-blue-1 inline" url="/pages/login/index" open-type="navigate" hover-class="none"> 返回登录 </navigator>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import WxValidate from "@/utils/WxValidate"
import md5 from "js-md5"
import { mapGetters, mapMutations } from "vuex"
export default {
    data() {
        return {
            loading: false,
            formData: {
                username: "",
                mobile: "",
                invite_code: "",
                password: "", //密码
                mobile_code: "" //验证码
            },
            timer: "",
            time: 0,
            disabled: false,
            codeLoading: false,
            validate: {}
        }
    },
    computed: {
        ...mapGetters(["authCode"])
    },
    onLoad(options) {
        const { invite_code } = options
        if (invite_code) this.formData.invite_code = invite_code
        const msg = {
            username: { required: "请输入您的用户名" },
            mobile: { required: "请输入11位手机号码", tel: "请输入正确的手机号码" },
            mobile_code: { required: "请输入验证码" },
            password: { required: "请输入您的密码", minlength: "密码长度最小为6位" }
        }
        const rule = {
            username: { required: true },
            mobile: { required: true, tel: true },
            mobile_code: { required: true },
            password: { required: true, minlength: 6 }
        }
        this.validate = new WxValidate(rule, msg)
    },
    methods: {
        async startTime() {
            try {
                const { mobile } = this.formData
                if (!mobile) return this.$showToast("请输入11位手机号码")
                if (!/^1[3456789]\d{9}$/.test(mobile)) return this.$showToast("请输入正确的手机号码")
                if (this.codeLoading) return
                this.codeLoading = true
                await this.$api.getMobileCode({ mobile, type: 1 })
                this.codeLoading = false
                this.$showSuccess("已发送")
                this.time = 30
                this.disabled = true
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    this.time--
                    if (this.time === 0) {
                        this.disabled = false
                        this.time = 0
                        clearInterval(this.timer)
                    }
                }, 1000)
            } catch (error) {
                this.codeLoading = false
            }
        },
        async formSubmit() {
            try {
                // 传入表单数据，调用验证方法
                if (!this.validate.checkForm(this.formData)) {
                    const error = this.validate.errorList[0]
                    return this.$showToast(error.msg)
                }
                if (this.loading) return
                this.loading = true
                let { password, ...params } = this.formData
                await this.$api.userRegister({ ...params, password: md5(password) })
                await this.$showWaiting("注册成功", 1500)
                uni.reLaunch({ url: "/pages/login/index" })
                this.loading = false
            } catch {
                this.loading = false
            }
        }
    },
    onHide() {
        clearInterval(this.timer)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>
<style lang="scss" scoped>
.btn-text {
    position: absolute;
    right: 0;
    top: 20rpx;
}
</style>
